import React, { useState, useEffect } from 'react';
import { Bar } from '@ant-design/plots';
import { Skeleton } from 'antd';
import { axiosAjax } from '../../services/analysisAxios';

export default function Manji() {
  // 今日不同类型的商品所有数量
  const [dataTotal, setDataTotal] = useState([]);
  const [loaded, setLoaded] = useState(false);
  // 获取今日不同类型的商品所有数量
  const allCommityTotal = async () => {
    let data = await axiosAjax('get', '/analysis/allorder');
    let arr = [];
    // 把不同类型商品的数据存到dataTotal
    if (data.data.length > 0) {
      arr = data.data.filter(item => {
        if (item['sales'] != 0) {
          return item;
        }
      });
    }
    setDataTotal([
      {
        type: '可乐',
        sales: 38,
      },
      {
        type: '雪碧',
        sales: 28,
      },
      ...arr,
      {
        type: '啤酒',
        sales: 58,
      },
      {
        type: '咖啡',
        sales: 18,
      }
    ]);
    setLoaded(true);
  }
  useEffect(() => {
    allCommityTotal();
  }, []);
  if (!loaded) {
    return <div style={{ backgroundColor: "white", height: '431px', marginTOp: "10px" }}>
      <Skeleton
        active
        title={{ width: 0 }}
        paragraph={{
          rows: 10,
          width: [570, 770, 770, 770, 770, 770, 770, 770, 770]
        }} />
    </div>
  }
  const config = {
    data: dataTotal,
    xField: 'sales',
    yField: 'type',
    meta: {
      type: {
        alias: '类别',
      },
      sales: {
        alias: '销售额',
      },
    },
    minBarWidth: 20,
    maxBarWidth: 20,
  };
  return (
    <div style={{ backgroundColor: "white" }}>
      <h1 style={{ fontSize: '20px', margin: '10px 0 0 20px' }}><span style={{ color: '#108ee9', fontSize: "20px", fontWeight: '900' }}>今日 </span> 不同类型商品销售金额统计</h1>
      <Bar {...config} style={{ margin: '0px 30px 0px 20px' }} />
    </div>
  );
}